import React from "react";
import styled from "styled-components";
import ContactInfo from "./ContactInfo";
const CardContainer = styled.div`
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 15px;
  padding: 2rem;
  width: 350px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
`;

const Avatar = styled.img`
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  display: block;
`;

const InfoSection = styled.div`
  text-align: center;
  margin-bottom: 1.5rem;

  h2 {
    color: #2c3e50;
    margin: 0.5rem 0;
  }

  p {
    color: #7f8c8d;
    margin: 0.3rem 0;
  }
`;

const CardInfo = ({ user }) => {
  return (
    <CardContainer>
      <Avatar src={user.avatar} alt="Profile" />
      <InfoSection>
        <h2>{user.name}</h2>
        <p>{user.title}</p>
        <p>{user.company}</p>
      </InfoSection>
      <ContactInfo user={user} />
    </CardContainer>
  );
};

export default CardInfo;
